@import 'https://unpkg.com/open-props@1.5.0/open-props.min.css';
@import 'https://unpkg.com/open-props/normalize.min.css';

:root {
  font-family: var(--font-mono);
  body {
    background: var(--stone-12);
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

@mixin hd {
  display: grid;
  gap: 0.5rem;
  > div {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: var(--gray-1);
    font-size: var(--font-size-5);
    &:nth-of-type(1) {
      background: var(--teal-7);
    }
    &:nth-of-type(2) {
      background: var(--orange-5);
    }
    &:nth-of-type(3) {
      background: var(--violet-5);
    }
    &:nth-of-type(4) {
      background: var(--cyan-7);
    }
  }
}
#app {
  border: var(--border-size-2) solid var(--blue-10);
  resize: both;
  padding: 10px;
  overflow: auto;

  #hd {
    @include hd();
    margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  #xj {
    @include hd();
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
